<template>
  <el-dialog
    :title="title"
    :visible="dialogVisible"
    custom-class="custom-dialog"
    :before-close="handleClose"
    @opened="initData"
  >
    <div>
      <el-form
        ref="form"
        class="query-more-form"
        size="mini"
        label-width="100px"
        :rules="rules"
        :model="form"
      >
        <el-row :gutter="20">
          <el-col
            v-if="status === 1 || status === 4 || status === 6"
            :span="12"
          >
            <div class="tree-panel">
              <div class="mb-10 pd-10">
                <el-input
                  size="small"
                  prefix-icon="el-icon-search"
                  placeholder="输入关键字进行过滤"
                  v-model="filterText"
                />
              </div>
              <!-- 部门检索 -->
              <div class="changeDepartment">
                <el-button
                  :type="typeRecommend == '推荐部门' ? 'warning' : ''"
                  @click="recommend"
                  >推荐部门</el-button
                >
                <el-button
                  :type="typeRecommend == '所有部门' ? 'warning' : ''"
                  @click="Allrecommend"
                  >所有部门</el-button
                >
              </div>

              <div class="tree-content of-auto pd-10" style="height: 400px">
                <div class="line-tree-panel">
                  <el-tree
                    v-loading="deptTreeLoading"
                    ref="tree"
                    class="line-tree"
                    node-key="id"
                    :data="deptTree"
                    :default-expanded-keys="expandedKeysDept"
                    :props="deptProps"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                    :highlight-current="true"
                  >
                    <div
                      slot-scope="{ node }"
                      :class="
                        active == node.label
                          ? 'custom-tree-node activeBg'
                          : 'custom-tree-node'
                      "
                    >
                      <div
                        :title="node.label"
                        style="
                          white-space: normal;
                          word-break: break-all;
                          height: 40px;
                          display: flex;
                          width: 100%;
                          align-items: center;
                        "
                        :style="{
                          'font-size':
                            node.level === 1
                              ? '16px'
                              : node.level === 2
                              ? '16px'
                              : '16px',
                          'font-weight': node.level === 1 ? 'bold' : '',
                        }"
                      >
                        <span
                          v-if="
                            (node.level === 3 || node.level === 4) &&
                            node.childNodes.length === 0
                          "
                          class="ml-10 mr-10 w-5 h-5 radius-50 bg-999"
                        ></span>
                        <span
                          class="tree-icon"
                          :class="
                            node.childNodes.length === 0
                              ? 'level-4'
                              : node.level === 1
                              ? 'level-1'
                              : node.level === 2
                              ? 'level-2'
                              : node.level === 3
                              ? 'level-3'
                              : 'level-4'
                          "
                        />
                        <span style="line-height: 20px">{{ node.label }}</span>
                      </div>
                    </div>
                  </el-tree>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="12" v-if="status == 6">
            <el-form-item label="限制时间" prop="planCompleteTime">
              <el-date-picker
                v-model="form.planCompleteTime"
                type="datetime"
                placeholder="选择限制时间"
              />
            </el-form-item>
          </el-col>

          <el-col
            v-if="status === 10 || status === 2"
            :span="status === 10 ? 24 : 8"
            ><el-form-item label="审核意见" prop="status"
              ><el-select
                ref="status"
                v-model="form.status"
                class="w-100"
                placeholder="请选择审核意见"
              >
                <el-option
                  v-for="item in handlingOpinionArr"
                  :key="item.id"
                  :label="item.type"
                  :value="item.id"
                /> </el-select></el-form-item
          ></el-col>

          <el-col
            :span="12"
            v-if="status == 1 || status == 6"
            class="distributeOpinionCol"
          >
            <el-form-item
              label="处理意见"
              prop="distributeOpinion"
              class="distributeOpinionItem"
            >
              <el-input
                v-model="form.distributeOpinion"
                type="textarea"
                :rows="4"
                placeholder="请输入处理意见"
                maxlength="500"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="status == 1 || status == 6"
            ><el-form-item label="推荐意见" prop="addressCity">
              <el-select
                class="w-100"
                v-model="form.recommendOpinion"
                placeholder="请选择推荐处理意见"
                @change="changeRecommendOpinion"
              >
                <el-option
                  v-for="item in recommendOpinionArr"
                  :key="item.id"
                  :value="item.opinion"
                  :label="item.opinion"
                /> </el-select></el-form-item
          ></el-col>

          <el-col
            v-if="status !== 1 && status !== 6 && status !== 12"
            :span="24"
            class="opinionCol"
            ><el-form-item label="处理意见" prop="opinion" class="opinionItem"
              ><el-input
                type="textarea"
                :rows="3"
                v-model="form.opinion"
                placeholder="请输入处理意见" /></el-form-item
          ></el-col>
          <el-col
            :span="24"
            v-if="status !== 1 && status !== 6 && status !== 12"
            ><el-form-item label="推荐意见" prop="addressCity">
              <el-select
                class="w-100"
                v-model="form.recommendOpinion"
                placeholder="请选择推荐处理意见"
                @change="changeRecommendOpinion"
              >
                <el-option
                  v-for="item in recommendOpinionArr"
                  :key="item.id"
                  :value="item.opinion"
                  :label="item.opinion"
                /> </el-select></el-form-item
          ></el-col>

          <el-col v-if="status == 8 || status == 9" :span="24"
            ><el-form-item
              label="申请事由"
              prop="applyReason"
              class="applyReason"
              ><el-input
                type="textarea"
                :rows="3"
                v-model="form.applyReason"
                placeholder="请输入申请事由" /></el-form-item
          ></el-col>

          <el-col v-if="status === 8" :span="24"
            ><el-form-item label="延期至" prop="">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker></el-form-item
          ></el-col>

          <el-col v-if="status === 1 || status === 4" :span="12"
            ><el-form-item label="限制时间" prop="timeLimit">
              <el-date-picker
                v-model="form.date"
                type="datetime"
                placeholder="选择限制时间"
                editable
                @change="changeTime"
              /> </el-form-item
          ></el-col>

          <!-- 处置人员 -->
          <el-col
            v-if="status === 1 || status === 4 || status === 6"
            :span="12"
            :class="
              userList.length > 0 ? 'nextUserId nextUserIdAdd' : 'nextUserId'
            "
          >
            <el-form-item label="处置人员">
              <el-input
                placeholder="请输入处置人员"
                v-model="form.nextUserName"
                class="input-with-select"
                @input="getUserList"
              >
              </el-input>
              <ul class="nextUserIdUl">
                <li
                  class="nextUserIdLi"
                  v-for="(item, i) in userList"
                  :key="i"
                  @click="changeUserName(item)"
                >
                  {{ item.nickName }}
                </li>
              </ul>
              <div class="pagination-panel paging" v-show="userList.length > 0">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="query.pageNum"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="query.pageSize"
                  layout="total, prev, pager, next"
                  :total="query.total"
                  small
                >
                </el-pagination>
              </div>
            </el-form-item>
          </el-col>

          <!-- 修改标签集 -->
          <el-col v-if="status === 12" :span="24"
            ><el-form-item label="标签集">
              <el-select
                class="w-100"
                v-model="form.labelsData"
                placeholder="请选择案件标签"
                multiple
                @visible-change="changeCaseLable"
                @remove-tag="removeCaseLable"
              >
                <el-option
                  v-for="item in labelListArr"
                  :key="item.id"
                  :value="item.name"
                  :label="item.name"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>

          <el-col v-if="status === 7">
            <el-form-item label="受理满意度">
              <el-rate
                v-model="form.acceptSatisfaction"
                show-text
                :texts="texts"
              >
              </el-rate>
            </el-form-item>
          </el-col>
          <el-col v-if="status === 7">
            <el-form-item label="办理满意度">
              <el-rate
                v-model="form.handleSatisfaction"
                show-text
                :texts="texts"
              >
              </el-rate>
            </el-form-item>
          </el-col>

          <el-col
            v-if="status !== 11 && status !== 12"
            :span="status === 10 || status === 3 ? 24 : 12"
          >
            <UploadFile
              ref="uploadFile"
              @pushFile="pushFile"
              :files="fileList"
            />
            <el-table :data="imageStrArr" border style="width: 100%">
              <el-table-column prop="name" label="文件名"> </el-table-column>
              <el-table-column prop="status" label="状态">
                <template>
                  <el-progress :percentage="progressBar"></el-progress>
                </template>
              </el-table-column>
              <el-table-column prop="size" label="大小"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >查看</el-button
                  >
                  <el-button type="text" size="small" @click="del(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="footer">
        <el-button
          :loading="saveLoading"
          class="operation-btn blue"
          size="mini"
          type="primary"
          @click="handleSave"
          >保存</el-button
        >
        <el-button size="mini" class="operation-btn grey" @click="handleClose"
          >取消</el-button
        >
      </div>

      <!-- 查看图片放大的组件 -->
      <el-dialog :visible.sync="dialogVisibleImg">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import UploadFile from "@/components/UploadFile";
import { staticImgUrl } from "@/url.js";
import { queryOpinionList } from "@/api/knowledgeBase.js";
import { parseTime } from "@/utils/index";
import { handleList } from "@/api/user.js";
import { getLabelList, recommend1, modifyLable } from "@/api/case.js";
import { roleDeptTreeselect } from "@/api/system/dept";
import {
  verifyDispatch,
  feedback,
  handleFeedback,
  handleDispatch,
  checkDispatch,
  checkFeedback,
  over,
  visit,
  delay_backOff,
  caseOpinon,
} from "@/api/wfm/wfm";
export default {
  name: "ExamineDialog",
  components: { UploadFile },
  props: {
    title: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    caseCode: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
      default: 0,
    },
    caseId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      form: {
        caseCode: "",
        content: "",
        opinion: "请协调快速处理！",
        distributeOpinion: "请协调快速处理！",
        attachments: [],
        acceptSatisfaction: null,
        handleSatisfaction: null,
        date: "",
        nextDeptId: null,
        nextDeptName: "",
        nextRoleId: null,
        nextRoleName: "",
        nextUserId: null,
        nextUserName: "",
        applyReason: "",
        status: "",
        planCompleteTime: "",
        labels: null,
        labelsData: [],
        id: null,
      },
      usernameId: null,
      active: null,
      categoryCode: null, //权责清单编码
      typeRecommend: "推荐部门",
      planCompletionTime: null,

      // 标签集
      labelListArr: [],
      recommendOpinionArr: [],

      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      progressBar: 0,
      handleSaveDisabled: false, //控制保存按钮是否为禁用状态
      handlingOpinionArr: [
        {
          type: "通过",
          id: 0,
        },
        {
          type: "不通过",
          id: 1,
        },
      ],
      delay: {
        applyType: "400",
        caseCode: "",
        attachments: [],
        delayApplyTime: "",
        applyReason: "",
        opinion: "",
      },
      backOff: {
        applyType: "402",
        caseCode: "",
        attachments: [],
        delayApplyTime: "",
        applyReason: "",
        opinion: "",
      },
      tableData: [],
      fileList: "",
      saveLoading: false,

      dialogVisibleImg: false,
      dialogImageUrl: "",

      //验证规则
      rules: {
        opinion: { required: true, message: "请输入处理意见", trigger: "blur" },
        distributeOpinion: {
          required: true,
          message: "请输入处理意见",
          trigger: "blur",
        },
        applyReason: {
          required: true,
          message: "请输入申请事由",
          trigger: "blur",
        },
        handlingOpinion: [
          { required: true, message: "请选择审核意见", trigger: "change" },
        ],
        planCompleteTime: [
          { required: true, message: "选择限制时间", trigger: "change" },
        ],
        timeLimit: [
          { required: true, message: "选择限制时间", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择审核意见", trigger: "change" },
        ],
      },
      texts: ["非常不满意", "不满意", "一般", "满意", "十分满意"],
      filterText: "",
      deptTreeLoading: false,
      deptTree: [],
      expandedKeysDept: [],
      deptProps: {
        children: "children",
        label: "label",
      },
      userList: [],
      imageStrArr: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data, node) {
      this.form.nextDeptId = data.id;
      this.form.nextDeptName = data.label;
      this.active = data.label;
      if (this.form.nextUserName) {
        this.form.nextUserName = null;
        this.form.nextUserId = null;
      }
      this.userList = [];
      this.getUserList();
    },

    // 过滤用户选择的时间
    changeTime() {
      if (Date.parse(this.form.date) < Date.parse(new Date())) {
        this.$message.warning("选择的时间不能小于当前时间");
        this.timeFlag = false;
      } else {
        this.timeFlag = true;
      }
    },

    addDay1(time) {
      return parseTime(time, "{y}-{m}-{d} {h}:{m}:{s}");
    },

    // 查询所有的标签集
    getAllLabelList() {
      getLabelList()
        .then((result) => {
          let { code, rows } = result;
          if (code == 200) {
            this.labelListArr = rows;
          }
        })
        .catch();
    },

    // 选择标签集
    changeCaseLable() {
      if (this.form.labelsData.length)
        this.form.labels = this.form.labelsData.toString();
    },

    // 移除标签集
    removeCaseLable() {
      this.form.labels = this.form.labelsData.toString();
    },

    // 所有部门
    Allrecommend() {
      // this.initData();
      this.typeRecommend = "所有部门";
      roleDeptTreeselect(1)
        .then((res) => {
          this.deptTree = res.depts;
          if (res.depts && res.depts.length > 0) {
            this.expandedKeysDept = res.depts.map((item) => item.id);
          }
          this.deptTreeLoading = false;
        })
        .catch(() => {
          this.deptTreeLoading = false;
        });
    },

    // 推荐部门
    recommend() {
      this.typeRecommend = "推荐部门";
      recommend1()
        .then((result) => {
          let { data } = result;
          if (data.length > 0) {
            this.deptTree = data;
            this.expandedKeysDept = data.map((item) => item.id);
            this.deptTreeLoading = false;
          } else {
            this.deptTree = data;
          }
          this.deptTreeLoading = false;
        })
        .catch();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.getUserList();
    },

    changeRecommendOpinion(val) {
      this.form.opinion = val;
      this.form.distributeOpinion = val;
    },

    changeUserName(val) {
      this.form.nextUserId = val.userId;
      this.usernameId = val.userId;
      this.form.nextUserName = val.nickName;
    },

    // 图片查看
    handleClick(row) {
      if (
        row.name.includes(".png") ||
        row.name.includes(".jpg") ||
        row.name.includes(".jpeg")
      ) {
        this.dialogImageUrl =
          row.url.indexOf("http") == 0 ? row.url : staticImgUrl + row.url;
        this.dialogVisibleImg = true;
      }
    },

    // 图片删除
    del(val) {
      this.imageStrArr.forEach((item, i) => {
        if (val.name == item.name) this.imageStrArr.splice(i, 1);
      });
    },

    // 搜索处置人员
    getUserList() {
      if (!this.form.nextDeptId && !this.form.nextUserId) {
        this.$message.error("请先选择部门");
        this.form.nextUserName = "";
      } else {
        (this.query.deptId = this.form.nextDeptId),
          (this.query.retrieval = this.form.nextUserName),
          handleList(this.query)
            .then((res) => {
              let { code, rows, total } = res;
              this.query.total = total;
              if (code == 200) {
                this.userList = rows;
              }
            })
            .catch(() => {});
      }
    },

    visibleChange(val) {
      if (val) {
        if (this.form.nextDeptId === "") {
          this.$message.warning("请先选择部门");
        }
      }
    },

    initData() {
      this.form.caseCode = this.caseCode;
      this.delay.caseCode = this.caseCode;
      this.backOff.caseCode = this.caseCode;
      this.form.id = this.caseId;
      this.deptTreeLoading = true;
      this.form.date = this.addDay1(this.planCompletionTime);
      recommend1()
        .then((result) => {
          let { data } = result;
          console.log(data)
          if (data.length > 0) {
            this.deptTree = data;
            this.expandedKeysDept = data.map((item) => item.id);
            this.deptTreeLoading = false;
          } else {
            this.deptTree = data;
          }
          this.deptTreeLoading = false;
        })
        .catch();

      // 查询推荐分发意见
      queryOpinionList()
        .then((res) => {
          this.recommendOpinionArr = res.rows;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    handleClose() {
      this.$emit("closeDialog");
      this.clearForm();
    },
    clearForm() {
      this.userList = [];
      this.form = {
        caseCode: "",
        opinion: "",
        attachments: [],
        nextUserId: null,
      };
      // this.filterText=null;
      (this.tableData = []),
        (this.fileList = ""),
        this.$refs["form"].resetFields();
    },

    pushFile(file) {
      this.tableData.push({
        name: file.name,
        size: file.size,
        status: file.status,
      });

      this.progressBar = file.percentage;
      // file.response.data.forEach((item) => {
      //   this.imageStrArr.push({
      //     name: item.fileName,
      //     path: item.fileUrl,
      //     url: staticImgUrl + item.fileUrl,
      //   });
      // });

      this.imageStrArr.push({
        name: file.name,
        path: file.response.data,
        url: staticImgUrl + file.response.data,
        size: file.size,
      });

      this.form.attachments = this.imageStrArr;
      this.backOff.attachments = this.imageStrArr;
      this.delay.attachments = this.imageStrArr;
    },
    // 保存
    handleSave() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.handleSaveDisabled = true;
          // this.delay.delayApplyTime=this.form.date
          this.delay.delayApplyTime = new Date(this.form.date).getTime() / 1000;
          this.delay.applyReason = this.form.applyReason;

          // this.backOff.delayApplyTime = new Date(this.form.date).getTime() / 1000;
          this.backOff.applyReason = this.form.applyReason;

          this.form.planCompleteTime =
            new Date(this.form.planCompleteTime).getTime() / 1000;

          this.delay.opinion = this.form.opinion;
          this.backOff.opinion = this.form.opinion;

          if (this.form.distributeOpinion)
            this.form.opinion = this.form.distributeOpinion;

          this.form.nextUserId = this.usernameId;

          // 调整受理满意度和办理满意度的分数
          this.form.acceptSatisfaction = this.form.acceptSatisfaction * 2;
          this.form.handleSatisfaction = this.form.handleSatisfaction * 2;

          switch (this.status) {
            case 1:
              // 核实派遣
              if (!this.form.nextDeptId) {
                this.$message.warning("请选择部门");
              } else {
                verifyDispatch(this.form)
                  .then((res) => {
                    this.$message.success("保存成功");
                    this.$router.push("/backlog/index");
                    this.handleClose();
                  })
                  .catch(() => {
                    this.$message.error("保存失败");
                  });
              }
              break;
            case 2:
              // 核实反馈
              feedback(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 3:
              // 处置反馈
              handleFeedback(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 4:
              // 核查派遣
              checkDispatch(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                  this.filterText = null;
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 5:
              // 核查反馈
              checkFeedback(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 6:
              // 处置派遣
              handleDispatch(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                  this.filterText = null;
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 7:
              // 案件回访
              visit(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 8:
              // 案件延期
              delay_backOff(this.delay)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 9:
              // 案件回退
              delay_backOff(this.backOff)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 10:
              // 审核处理意见
              caseOpinon(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  if (this.form.status == 0) {
                    this.$bus.$emit("caseCode");
                  } else {
                    this.$router.push("/backlog/index");
                  }
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 11:
              // 案件结案
              over(this.form)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.push("/backlog/index");
                  this.handleClose();
                })
                .catch(() => {
                  this.$message.error("保存失败");
                });
              break;
            case 12:
              // 修改标签集
              if (
                this.form.labelsData.length == 0 ||
                !this.form.labelsData.length
              ) {
                this.$message.error("请选择要修改的标签值");
              } else {
                modifyLable(this.form)
                  .then((res) => {
                    this.$message.success("保存成功");
                    // this.$router.push("/backlog/index");
                    this.form.labelsData = [];
                    this.$emit("refreshPage");
                    this.handleClose();
                  })
                  .catch(() => {
                    this.$message.error("保存失败");
                  });
              }
              break;
            default:
              break;
          }
        }
      });
    },
  },
  created() {
    // 获取权责清单编码
    this.$bus.$on("categoryCode", (data) => {
      this.categoryCode = data.categoryCode;
      this.planCompletionTime = data.planCompletionTime;
    });

    // 获取标签集
    this.getAllLabelList();
  },
};
</script>

<style lang='scss' scoped>
.opinionCol {
  margin: 20px 0;
}
/deep/.opinionCol .opinionItem .el-form-item__label {
  height: 66px;
  display: flex;
  align-items: center;
}

/deep/.nextUserId .opinionItem .el-form-item__label {
  height: 36px;
  display: flex;
  align-items: center;
}
/deep/ .distributeOpinionItem {
  width: 100%;
}
/deep/ .distributeOpinionItem .el-form-item__label {
  width: 100% !important;
  border: 1px solid #dbdcde;
  border-radius: 4px;
}
/deep/ .distributeOpinionItem {
  height: auto;
}
/deep/ .distributeOpinionItem .el-form-item__content {
  margin-left: 0 !important;
}

.bgcurrent {
  background: skyblue;
}

.nextUserIdAdd {
  height: 170px;
  margin-bottom: 20px;
}

.nextUserIdUl {
  list-style: none;
  // height: 170px;
  // width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-left: -100px;
  padding: 0 !important;
  margin-top: 10px;
  .nextUserIdLi {
    margin-right: 12px;
    line-height: 20px;
    width: 21%;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.paging {
  margin-top: 10px;
  margin-left: -100px;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.applyReason {
  height: auto;
  /deep/ .el-form-item__label {
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.activeBg {
  background: #ddd;
}

/deep/ .el-rate {
  margin-top: 10px;
  margin-left: 10px;
}
</style>
